// 测试getComputedStyle功能
import { JSDOM } from 'jsdom';

describe('computedStyle测试', () => {
  it('should get computed style correctly using JSDOM', async () => {
    const html = `
      <html>
        <head>
          <style>
            body {
              color: red;
              font-family: 'Arial', sans-serif;
              font-size: 16px;
            }
            .container {
              font-size: 20px;
              color: blue;
            }
            .content {
              font-weight: bold;
            }
          </style>
        </head>
        <body>
          <div class="container">
            <p class="content">测试文本</p>
          </div>
        </body>
      </html>
    `;

    // 创建JSDOM实例
    const dom = new JSDOM(html);
    const { window } = dom;
    const { document } = window;

    // 获取元素
    const contentElement = document.querySelector('.content') as HTMLElement;
    
    // 使用getComputedStyle获取计算样式
    const computedStyle = window.getComputedStyle(contentElement);
    
    // 验证计算样式 - 适应JSDOM的实际输出格式
    expect(computedStyle.fontWeight).toBe('bold'); // JSDOM返回'bold'而不是'700'
  }, 30000);
});